<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*无序列表中的第一个子元素*/
        ul li:first-child{
            background-color: aqua;
        }
        /*无序列表中的最后一个子元素*/
        ul li:last-child{
            background-color: yellow;
        }
        /*选择当前元素的父级元素，括号是几就往下数几个元素，并且数到的元素必须是当前元素类型一致才会生效 （按照顺序和元素类型）*/
        p:nth-child(1){
            color: red;
        }
        /*选择当前元素的父级元素，根据类型去找括号中数字第几个元素*/
        p:nth-of-type(4){
            font-size: 100px;
        }
    </style>
</head>
<body>

    <p>p1</p>
    <h1>a</h1>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>!!1</li>
        <li>!!2</li>
        <li>!!3</li>
    </ul>
    <p>p4</p>
</body>
</html>